<template>


  <div class="user-info">
    <div class="section-title">联系我们</div>
    <!-- 用户头像 -->
    <img src="@/assets/img/avatar.png" alt="User Avatar" width="100" height="100">
    <el-input class="username" v-model="formLogin.username" placeholder="邮箱" type="text" style="width: 400px"/>
    <el-input class="password" v-model="formLogin.password" placeholder="建议" type="textarea"
              style="width: 400px;height: 500px"/>

    <div class="buttons">
      <button @click="login">提交</button>

    </div>


  </div>


</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";


// 用户信息
const formLogin = reactive({
  username: "",
  nickname: "",
  password: "",
})


const router = useRouter()
const loading = ref(false)


function login() {
  ElMessage.closeAll();
  if (!formLogin.username) {
    ElMessage.warning("请输入邮箱！")
    return false;
  } else if (!formLogin.password) {
    ElMessage.warning("请输入建议！")
    return false;
  } else {
    ElMessage.success("提交成功")
  }
}


</script>
<style>


</style>
<style scoped>
/*左右分区显示格式——出现在个人主页中*/


.user-info {
  background-image: url("@/assets/img/contact_bg.jpg");
  flex: 1; /* 左边部分占四分之一 */
  padding: 20px;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  display: flex;
  height: 600px;
  flex-direction: column;
  align-items: center; /* 左侧内容垂直居中显示 */
  justify-content: center; /* 左侧内容水平居中显示 */
}

.user-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-info .username,
.user-info .account {
  margin-bottom: 10px;
  text-align: center;
}

.user-info .buttons {
  margin-top: auto; /* 将按钮置于左侧部分底部 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 让按钮水平居中显示 */
  justify-content: center; /* 让按钮垂直居中显示 */
}

.user-info .buttons button {
  margin-bottom: 10px; /* 按钮之间添加一些间距 */
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 50px;
}

</style>
